<template lang="pug">
  div.table-empty
    s-table(
      v-if="$route.path === '/finance/charge/plan'"
      ref="table"
      :reqUrl="reqUrl"
      reqMethod="GET"
      :column="tableObj.column"
      :filterProps="{ fields: searchField }"
    )
      .table-operator(slot="table-operator")
        el-button.gradientVertical(size="large" round @click="addHandle()") 添加计划
      template(slot="action" slot-scope="text, scope")
        el-link(@click="$router.push({ path: '/finance/charge/plan/account/admin', query: { id: scope.id }})" type="primary") 账单
        el-link( @click="addHandle(scope)" type="primary") 编辑
        el-popconfirm(
            title="您确认要作废该计划?"
            @confirm="() => actionHandle(scope.id, 'invalid')"
            @onConfirm="() => actionHandle(scope.id, 'invalid')"
          )
            el-link(slot="reference" v-if="!scope.cancelled" type="danger") 禁用
      template(slot="beginDate" slot-scope="text, scope")
        span {{text | dateFilter('YYYY/MM/DD')}}
      template(slot="endDate" slot-scope="text, scope")
        span {{text | dateFilter('YYYY/MM/DD')}}
    router-view(v-else)
    modal-form(
      :title="`${chosedRow.id ? '编辑' : '新增'}计划`"
      :visible.sync="addVisible"
      :fields="addField"
      :submitHandle="addSubmit"
      :submitting="addSubmitting"
      :layoutCol="{ sm: 24, md: 24, lg: 24 }"
    )
</template>
<script>
import { addPlan, cancelPlan } from './api'
import { planColumn } from './config'
import dayjs from 'dayjs'

export default {
  data () {
    return {
      loading: false,
      tableObj: {
        column: planColumn
      },
      chosedRow: {},
      addVisible: false,
      addSubmitting: false
    }
  },
  computed: {
    searchField () {
      return [
        {
          key: 'cancelled',
          label: '状态',
          type: 'select',
          fieldProps: {
            dictKey: 'finPlanType',
            props: { value: 'value', label: 'name' }
          },
          initialValue: false
        },
        {
          key: 'name',
          label: '计划名称'
        }
      ]
    },
    reqUrl () {
      return 'crm/fin/plan/list'
    },
    addField () {
      const { chosedRow } = this
      return [
        {
          key: 'name',
          label: '计划名称',
          rules: [{ required: true, message: '请输入' }],
          initialValue: chosedRow.name
        },
        {
          key: 'daterange',
          label: '时间段',
          type: 'daterange',
          rules: [{ required: true, message: '请输入' }],
          initialValue: [chosedRow.beginDate, chosedRow.endDate]
        },
        {
          key: 'title',
          label: '说明',
          type: 'textarea',
          initialValue: chosedRow.title
        }
      ]
    }
  },
  created () {
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    actionHandle (id, type) {
      console.log(id)
      console.log(type)
      if (type === 'delete') {
        addPlan({ id: id }, 'delete').then(res => {
          this.$message.success('删除成功')
          this.refreshTable()
        })
      } else {
        cancelPlan({ planId: id }, 'post').then(res => {
          this.$message.success('作废成功')
          this.refreshTable()
        })
      }
    },
    addHandle (row = {}) {
      this.chosedRow = row
      this.addVisible = true
    },
    // 添加计划
    addSubmit (values) {
      console.log(values)
      const data = {
        beginDate: dayjs(values.daterange[0]).format('YYYY/MM/DD'),
        endDate: dayjs(values.daterange[1]).format('YYYY/MM/DD'),
        id: null,
        ...values
      }
      delete data.daterange
      if (this.chosedRow.id) {
        data.id = this.chosedRow.id
      }
      addPlan(data, 'post').then(res => {
        this.addVisible = false
        if (res) {
          this.$message.success(`${this.chosedRow.id ? '编辑' : '新增'}计划成功`)
          this.refreshTable()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
